<template>
	<view class="page">
		<page-head :title="title"></page-head>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">
				<view class="uni-media-list">
					<view class="uni-media-list-logo">
						<image v-if="showImg" :src="value.img"></image>
					</view>
					<view class="uni-flex uni-column" style="flex: 1;justify-content: space-between;">
						<view class="text" style="height: 50upx;text-align: left">
							{{value.productName}}
						</view>
						<view class="uni-flex uni-row">
							<view class="text" style="flex: 1;">小代:{{value.price1}}</view>
							<view class="text" style="flex: 1;">大代:{{value.price2}}</view>
							<view class="text" style=" color:#FF3333; flex: 1;">零售:{{value.price3}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'media-list',
				showImg: false,
				list: [
					{
						productName: '神琦植物蛋白霜',
						price1: '98',
						price2: '88',
						price3: '159'
					},
					{
						productName: '神琦植物蛋白乳',
						price1: '88',
						price2: '78',
						price3: '139'
					},
					{
						productName: '神琦爽肤水',
						price1: '53',
						price2: '48',
						price3: '68'
					},
					{
						productName: '神琦活性柔肤水',
						price1: '68',
						price2: '58',
						price3: '98'
					},
					{
						productName: '爱心美白祛斑霜',
						price1: '238',
						price2: '218',
						price3: '279'
					},
					{
						productName: '爱心ve乳（小）',
						price1: '23',
						price2: '18',
						price3: '28'
					},
					{
						productName: '爱心ve乳（中）',
						price1: '48',
						price2: '38',
						price3: '78'
					},
					{
						productName: '爱心ve乳（大）',
						price1: '68',
						price2: '58',
						price3: '158'
					},
					{
						productName: '爱心玻尿酸面膜',
						price1: '109',
						price2: '99',
						price3: '168'
					},
					{
						productName: '爱心花青素修护滋养霜',
						price1: '128',
						price2: '118',
						price3: '178'
					}

				]
			}
		},
		onLoad() {
			setTimeout(() => {
				this.showImg = true;
			}, 400)
		}
	}
</script>

<style>
	.title {
		padding: 20upx;
	}

	.uni-media-list-text-top {
		line-height: 36upx;
		font-size: 30upx;
		margin-left: 20upx;
	}

	.flex-item {
		width: 33.3%;
		height: 36upx;
		text-align: center;
		line-height: 36upx;
	}
</style>
